<template>
    <view>
        <view v-if="temp.data.listStyle != 0" :class="temp.data.listStyle == 3 ? 'dir-left-wrap' : 'main-between flex-wrap'">
            <app-goods
              v-for="(goods,idx) in goodsList" :key="goods.id"
              :goods="goods"
              :no_extra="false"
              :showTag="temp.id != 'booking'"
              :index="idx"
              :theme="theme"
              :padding="temp.data.c_padding_lr"
              :showProgressBar="temp.data.showProgressBar"
              :buttonColor="temp.data.buttonColor"
              :listStyle="temp.data.listStyle"
              :fill="temp.data.fill"
              :goodsCoverProportion="temp.data.goodsCoverProportion"
              :goodsStyle="temp.data.goodsStyle"
              :showGoodsName="temp.data.showGoodsName"
              :textStyle="temp.data.textStyle"
              :showBuyBtn="temp.data.showBuyBtn"
              :buyBtnStyle="temp.data.buyBtnStyle"
              :buyBtnText="temp.data.buyBtn != 'cart' && temp.data.buyBtn != 'add'  ? temp.data.buyBtnText : ''"
              :showGoodsTag="temp.data.showGoodsTag"
              :showGoodsPrice="temp.data.showGoodsPrice != undefined ? temp.data.showGoodsPrice : true"
              :goodsTagPicUrl="temp.data.goodsTagPicUrl"
              :isUnderLinePrice="temp.data.isUnderLinePrice"
              :c_border_top="temp.data.c_border_top"
              :c_border_bottom="temp.data.c_border_bottom"
              :goodsEndColor="temp.data.goodsEndColor ? temp.data.goodsEndColor: '#FFFFFF'"
              :btnSize="50"
              :buy="temp.id == 'goods'"
              @show="attrShow"
              :goodsBorderColor="temp.data.goodsBorderColor"
              :buyBtnImage="temp.data.buyBtn == 'cart' ? goodsImg.cart : temp.data.buyBtn == 'add' ? goodsImg.add : ''"
            ></app-goods>
        </view>
        <scroll-view v-else scroll-x class="scroll-goods-list">
            <view class="dir-left-nowrap" id="swipe-left-right">
                <app-goods
                  v-for="(goods,idx) in goodsList" :key="goods.id"
                  :no_extra="true"
                  :index="idx"
                  :goods="goods"
                  :theme="theme"
                  :padding="0"
                  :buttonColor="temp.data.buttonColor"
                  :listStyle="temp.data.listStyle"
                  :fill="temp.data.fill"
                  :goodsCoverProportion="temp.data.goodsCoverProportion"
                  :goodsStyle="temp.data.goodsStyle"
                  :showGoodsName="temp.data.showGoodsName"
                  :textStyle="temp.data.textStyle"
                  :showBuyBtn="temp.data.showBuyBtn"
                  :buyBtnStyle="temp.data.buyBtnStyle"
                  :showGoodsPrice="temp.data.showGoodsPrice != undefined ? temp.data.showGoodsPrice : true"
                  :buyBtnText="temp.data.buyBtnText"
                  :showGoodsTag="temp.data.showGoodsTag"
                  :goodsTagPicUrl="temp.data.goodsTagPicUrl"
                  :goodsBorderColor="temp.data.goodsBorderColor != undefined ? temp.data.goodsBorderColor : ''"
                  :isUnderLinePrice="temp.data.isUnderLinePrice"
                  :c_border_top="temp.data.c_border_top"
                  :c_border_bottom="temp.data.c_border_bottom"
                  :goodsEndColor="temp.data.goodsEndColor != undefined ? temp.data.goodsEndColor: '#FFFFFF'"
                ></app-goods>
            </view>
        </scroll-view>
    </view>
</template>


<script>
import {mapState} from "vuex";
import appGoods from "@/components/basic-component/app-goods/app-goods.vue";
export default {
    name: "app-diy-list",
    components: {
        appGoods
    },
    data() {
        return {
            goodsList: []
        }
    },
    computed: {
        ...mapState({
            goodsImg: state => state.mallConfig.__wxapp_img.goods,
        }),
          // 获取商品数组
        copyList() {
            console.log(this.list)
            let list = this.list && this.list.length > 0 ? this.list : this.temp.data.list;
            return list;
        },
    },
    watch: {
        temp: {
            handler(nVal, oVal) {
                this.temp = nVal;
            },
            deep: true,
            immediate: true
        },
        copyList: {
           handler(nVal, oVal) {
                if (nVal) {
                    this.goodsList = [];
                    this.tempList = this.cloneData(nVal);
                    this.splitData();
                }
                this.tempList && this.splitData();
            },
            deep: true,
            immediate: true
        }
    },
    created() {
        console.log(this.list)
    },
    methods: {
        attrShow(e) {
            this.$emit('show',e)
        },
        // 复制而不是引用对象和数组
        cloneData(data) {
            return JSON.parse(JSON.stringify(data));
        },
        // 循环载入
        splitData() {
            if (!this.tempList.length) return;
            let item = this.tempList[0];
            this.goodsList.push(item);
            this.tempList.splice(0, 1);
            if (this.tempList.length) {
                setTimeout(() => {
                    this.splitData();
                }, this.addTime);
            }
        },
    },
    props: {
        temp: {
            type: Object,
            default() {
                return {};
            }
        },
        list: {
            type: Array,
            default() {
                return [];
            }
        },
        // 载入间隔
        addTime: {
            type: Number,
            default: 0
        },
        theme: Object
    },
}
</script>

<style scoped lang="scss">
.scroll-goods-list {
    white-space: nowrap;
}
// #ifdef MP-BAIDU
#swipe-left-right {
    width: 750upx;
    height :100%;
}
// #endif
</style>